<!--
 * @Author: chen qi
 * @Date: 2022-07-09 08:37:50
 * @LastEditors: chen qi
 * @LastEditTime: 2022-07-12 15:05:02
 * @Description:
-->
<template>
  <div
    :ref="`lineAndBar${id}`"
    class="line-and-bar-chart"
  ></div>
</template>

<script>
import commonMixin from '@/utils/mixin'
export default {
  name: 'lineAndBarChart',
  mixins: [commonMixin],
  props: {
    id: {
      type: [Number, String],
      default: 1
    },
    // 配置
    options: {
    },
    xAxisData: {
      type: Array,
      default: () => {
        return [
          '一月',
          '二月',
          '三月',
          '四月',
          '五月',
          '六月',
          '七月',
          '八月',
          '九月',
          '十月',
          '十一月',
          '十二月'
        ]
      }
    },
    yAxisDatas: {
      type: Object,
      default: () => {
        return {
          barData1: [40, 22, 255, 77, 24, 55, 55, 89, 98, 190, 106, 224], // 开户数
          barData2: [{
            name: '一月',
            value: 1000
          }, 222, 223, 777, 244, 255, 555, 879, 938, 1364, 1806, 2324], // 签约数
          lineData1: [1, 13, 37, 35, 15, 13, 25, 21, 6, 45, 32, 2], // 开户率
          lineData2: [10, 13, 37, 55, 15, 23, 25, 61, 6, 35, 32, 2] // 签约率
        }
      }
    }
  },
  data() {
    return {
      resDebounce: null,
      chart: null,
      option: {
        tooltip: {
          trigger: 'axis',
          formatter: function(params, ticket, callback) {
            var res = params[0].name

            for (var i = 0, l = params.length; i < l; i++) {
              if (params[i].seriesType === 'line') {
                res +=
                  '<br/>' +
                  params[i].seriesName +
                  ' : ' +
                  (params[i].value ? params[i].value : '-') +
                  '%'
              } else {
                res +=
                  '<br/>' +
                  params[i].seriesName +
                  ' : ' +
                  (params[i].value ? params[i].value : '-')
              }
            }
            return res
          }
        },
        grid: {
          show: false,
          containLabel: false,
          top: '33%',
          left: '12%',
          right: '12%',
          bottom: '15%'
        },
        legend: {
          show: true,
          top: '20%'
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true,
              interval: 'auto'
            },
            axisLabel: {
              interval: 0,
              rotate: 40
            },
            data: this.xAxisData
          }
        ],
        dataZoom: [],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            position: 'left',
            axisLabel: {
              formatter: '{value}'
            },
            axisLine: {
              show: true
            },
            splitLine: {
              show: false
            }
          },
          {
            type: 'value',
            name: '',
            min: 0,
            position: 'right',
            axisLabel: {
              show: true,
              interval: 'auto',
              formatter: (value, index) => {
                return value + '%'
              }
            },
            axisLine: {
              show: true
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            z: 6,
            name: '开户数',
            type: 'bar',
            yAxisIndex: 0,
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgb(59 119 222)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgb(19 36 63)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor: 'rgb(124 170 242)'
            },
            data: this.yAxisDatas.barData1
          },
          {
            z: 6,
            name: '签约数',
            type: 'bar',
            yAxisIndex: 0,
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgb(17 189 235)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgb(22 39 64)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor: 'rgb(144 228 249)'
            },
            data: this.yAxisDatas.barData2
          },
          {
            z: 4,
            name: '开户率',
            type: 'line',
            smooth: true, // 平滑曲线显示
            yAxisIndex: 1,
            symbol: 'circle',
            symbolSize: 8,
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            },
            itemStyle: {
              color: '#e5bf0b'
            },
            lineStyle: {
              color: '#e5bf0b',
              opacity: 1,
              width: 1,
              shadowColor: 'rgba(0,0,0,0.4)',
              shadowBlur: 10,
              shadowOffsetY: 10
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#c3ac1d' // 0% 处的颜色
                }, {
                  offset: 1, color: '#161c2d' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: this.yAxisDatas.lineData1
          },
          {
            z: 5,
            name: '签约率',
            type: 'line',
            yAxisIndex: 1,
            symbol: 'circle',
            symbolSize: 8,
            smooth: true, // 平滑曲线显示
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            },
            itemStyle: {
              color: '#f34403'
            },
            lineStyle: {
              color: '#f34403',
              opacity: 1,
              width: 1,
              shadowColor: 'rgba(0,0,0,0.4)',
              shadowBlur: 10,
              shadowOffsetY: 10
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#f34403' // 0% 处的颜色
                },
                {
                  offset: 1, color: '#161c2d' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: this.yAxisDatas.lineData2
          }
        ]
      }
    }
  },
  mounted() {
    this.chart = this.$echarts.init(this.$refs[`lineAndBar${this.id}`])
    this.chart.setOption(this.option)
    this.resDebounce = this.debounce(this.chart.resize, 300)
    window.addEventListener('resize', this.resDebounce)
  },
  destroyed() {
    window.addEventListener('resize', this.resDebounce)
  }
}
</script>

<style lang="less" scoped>
.line-and-bar-chart {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
